<template>
  <div ref="print">
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
      label-width="80px"
      label-position="left"
      style="position: relative"
    >
      <el-form-item label="省份" prop="provinceid">
        <el-select
          @change="cityList"
          style="width: 400px"
          v-model="form.provinceid"
          placeholder="请选择"
        >
          <el-option
            v-for="item in provinces"
            :key="item.pid"
            :label="item.province"
            :value="item.province"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="城市" prop="city">
        <el-select
          clear
          style="width: 400px"
          v-model="form.city"
          placeholder="请选择"
        >
          <el-option
            v-for="item in citys"
            :key="item.cid"
            :label="item.cityname"
            :value="item.cityname"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="品牌" prop="brand">
        <el-select
          @change="carList"
          style="width: 400px"
          v-model="form.brand"
          placeholder="请选择"
        >
          <el-option
            v-for="item in brands"
            :key="item.bid"
            :label="item.brandname"
            :value="item.brandname"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="车系" prop="car">
        <el-select
          @change="pic"
          style="width: 400px"
          v-model="form.car"
          placeholder="请选择"
        >
          <el-option
            v-for="item in cars"
            :key="item.serierid"
            :label="item.carseries"
            :value="item.carseries"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上牌年份" prop="date">
        <el-date-picker
          style="width: 400px"
          v-model="form.date"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="所属保险" prop="insure">
        <el-select
          style="width: 400px"
          v-model="form.insure"
          placeholder="请选择"
        >
          <el-option
            v-for="item in insures"
            :key="item.iid"
            :label="item.insure"
            :value="item.insure"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="事故类型" prop="accident">
        <el-select
          style="width: 400px"
          v-model="form.accident"
          placeholder="请选择"
        >
          <el-option
            v-for="item in accidents"
            :key="item.aid"
            :label="item.accident"
            :value="item.accident"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="暂存地" prop="address">
        <el-select
          style="width: 400px"
          v-model="form.address"
          placeholder="请选择"
        >
          <el-option
            v-for="item in addresss"
            :key="item.aid"
            :label="item.address"
            :value="item.address"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        prop="img"
        label="图片"
        v-model="form.img"
        style="position: absolute; top: 0; left: 500px"
      >
        &nbsp;<el-image
          style="width: 800px; height: 800px"
          :src="img"
          fit="cover"
        ></el-image>
      </el-form-item>
      <el-form-item label="行驶里程" prop="mileage">
        <el-input v-model="form.mileage" style="width: 400px"></el-input>
      </el-form-item>
      <el-form-item label="定价" prop="price">
        <el-input v-model="form.price" style="width: 400px"></el-input>
      </el-form-item>
      <el-button
        class="no-print"
        @click="submit"
        type="primary"
        style="margin-left: 200px"
        >确认评估</el-button
      >
      <el-button class="no-print" @click="print" type="success">打印</el-button>
    </el-form>
  </div>
</template>

<script>
import httpApi from "@/http";
export default {
  data() {
    return {
      provinces: [],
      citys: [],
      brands: [],
      cars: [],
      insures: [],
      accidents: [],
      addresss: [],
      img: "",
      form: {
        city: "",
        provinceid: "",
        brand: "",
        car: "",
        date: "",
        ndate: "2023-06-22",
        img: this.img,
        mileage: "",
        price: "",
        address: "",
        accident: "",
        insure: "",
      },
      rules: {
        city: [{ required: true, message: "必填", trigger: "blur" }],
        provinceid: [{ required: true, message: "必填", trigger: "blur" }],
        brand: [{ required: true, message: "必填", trigger: "blur" }],
        car: [{ required: true, message: "必填", trigger: "blur" }],
        date: [{ required: true, message: "必填", trigger: "blur" }],
        img: [{ required: true, message: "必填", trigger: "blur" }],
        mileage: [{ required: true, message: "必填", trigger: "blur" }],
        price: [{ required: true, message: "必填", trigger: "blur" }],
        address: [{ required: true, message: "必填", trigger: "blur" }],
        accident: [{ required: true, message: "必填", trigger: "blur" }],
        insure: [{ required: true, message: "必填", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.provinceList();
    this.brandList();
    this.insureList();
    this.accidentList();
    this.addressList();
  },
  methods: {
    //省份列表
    provinceList() {
      httpApi.estimateApi.queryProvince().then((res) => {
        this.provinces = res.data.data;
      });
    },
    //城市列表
    cityList() {
      const province = this.form.provinceid;
      httpApi.estimateApi.queryCity({ province }).then((res) => {
        // console.log(res);
        this.citys = res.data.data;
      });
    },
    //车辆列表
    carList() {
      const brandname = this.form.brand;
      httpApi.estimateApi.queryCarSeries({ brandname }).then((res) => {
        // console.log(res);
        this.cars = res.data.data;
      });
    },
    //品牌列表
    brandList() {
      httpApi.estimateApi.queryCarBrand().then((res) => {
        // console.log(res);
        this.brands = res.data.data;
      });
    },
    //车辆图片
    pic() {
      const carseries = this.form.car;
      console.log(carseries);
      httpApi.estimateApi.queryCarPic({ carseries }).then((res) => {
        this.img = res.data.data[0].pic;
      });
    },
    //保险公司列表
    insureList() {
      httpApi.estimateApi.queryInsure().then((res) => {
        // console.log(res);
        this.insures = res.data.data;
      });
    },
    //事故类型
    accidentList() {
      httpApi.estimateApi.queryAccident().then((res) => {
        // console.log(res);
        this.accidents = res.data.data;
      });
    },
    //存放地列表
    addressList() {
      httpApi.estimateApi.queryAddress().then((res) => {
        // console.log(res);
        this.addresss = res.data.data;
      });
    },
    //提交评估按钮
    submit() {
      this.form.img = this.img;
      let sgdate = new Date().toLocaleString();
      this.form.ndate = sgdate;
      console.log(this.form);
      this.$refs.form.validate((valid) => {
        if (valid) {
          httpApi.carmanagementApi.caradd(this.form).then((res) => {
            if (res.data.code == 200) {
              this.$message({ type: "success", message: "成功收购车辆" });
              this.$router.push("/home/car-management");
            } else {
              this.$message({ type: "error", message: "收购失败" });
            }
          });
        }
      });
    },
    //打印
    print() {
      this.$print(this.$refs.print);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>